import { EditableProTable } from "@ant-design/pro-components";
import { useEffect, useState } from "react";

const ReqParams: React.FC<any> = (props) => {

    return <>
        <EditableProTable<any>
            rowKey="id"
            maxLength={5}
            name={'query'}
            recordCreatorProps={{
                position: 'bottom',
                record: () => ({ id: (Math.random() * 1000000).toFixed(0) }),
            }}
            toolBarRender={false}
            loading={false}
            columns={[
                {
                    title: '查询参数名',
                    dataIndex: 'key',
                },

                {
                    title: '查询参数值',
                    dataIndex: 'value',
                },
                {
                    title: '操作',
                    valueType: 'option',
                    render: (text, record, _, action) => [
                        <a
                            key="editable"
                            onClick={() => {
                                action?.startEditable?.(record.id);
                            }}
                        >
                            编辑
                        </a>,
                        <a
                            key="delete"
                            onClick={() => {
                                const tableDataSource = props?.form?.getFieldValue(
                                    'query',
                                ) as any[];
                                props?.form?.setFieldsValue({
                                    query: tableDataSource.filter((item) => item.id !== record.id),
                                });
                            }}
                        >
                            删除
                        </a>,
                    ],
                },

            ]}
            editable={{
                type: 'multiple',
            }}
        />
    </>
}

export default ReqParams